<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>ColumNav example: preview pane</title>
    <script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/utilities/utilities.js"></script>
    <script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/container/container_core-min.js"></script>
    <script type="text/javascript" src="../js/carousel.js"></script>
    <script type="text/javascript" src="../js/columnav.js"></script>
    <link href="../css/carousel.css" rel="stylesheet" type="text/css"/>
    <link href="../css/columnav.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript">
      try { document.execCommand('BackgroundImageCache', false, true); } catch(e) {}
      function preview(e) {
          var target = YAHOO.util.Event.getTarget(e);
          if (target.tagName == 'SPAN')
              target = target.parentNode;
          if ('preview' == target.getAttribute('rel')) {
              target.list = createPane(target);
              cn._next(e);
              return false;
          }
          return true;
      }
      function createPane(src) {
          var ul = document.createElement('ul');
          var li = document.createElement('li');
          var a = document.createElement('a');
          var text = src.firstChild.firstChild.data;
          a.setAttribute('href', src.getAttribute('href'));
          a.appendChild(document.createTextNode(text));
          a.className = 'preview ' + text.toLowerCase();
          li.appendChild(a);
          ul.appendChild(li);
          return ul;
      }
      var cn;
      function init() {
          var cn_cfg = {
              datasource: document.getElementById('sites'),
              prevElement: 'columnav-prev',
              linkAction: preview
          };
          cn = new YAHOO.extension.ColumNav('columnav', cn_cfg);

          var sv_cfg = { url: location.href, modifier: 'HTML' };
          var sv = new YAHOO.extension.SourceViewer('source', sv_cfg);
      }
      YAHOO.util.Event.addListener(window, 'load', init);
    </script>
    <script type="text/javascript" src="../js/viewsource.js"></script>
    <link href="../css/stringify.css" rel="stylesheet" type="text/css"/>
    <style type="text/css">
      .carousel-component ul.carousel-list li a.preview span {
          height: 95px;
          margin: 0;
          padding: 0;
          text-indent: -9999px;
      }
      .carousel-component ul.carousel-list li a.google span {
          background: url(../images/google.png) no-repeat center center;
      }
      .carousel-component ul.carousel-list li a.yahoo span {
          background: url(../images/yahoo.png) no-repeat center center;
      }
    </style>
  </head>
  <body>
    <div id="main">
      <div id="content">
        <p style="float:right"><a href="../">Documentation</a></p>
        <h1>ColumNav</h1>
        <h2>Example</h2>
        <div class="prevButton">
          <a href="javascript:void(0)" id="columnav-prev">&lt; back</a>
        </div>
        <div id="columnav" class="carousel-component">
          <div class="carousel-clip-region">
            <ul class="carousel-list"></ul>
          </div>
        </div>
        <div class="viewsource" id="source"></div>
        <p>The ColumNav above is initialized from the list below. This example shows how to write a <code>linkAction</code> method to manually build a custom menu. The key to this technique is to call the "private" (undocumented) <code>_next</code> method to reveal the new menu. While this is generally not recommended, it demonstrates how to override the default behavior of the ColumNav if you so desire. In this case, the default behavior would have been to follow the links to their respective pages. Instead, it presents a preview pane.</p>
        <ul id="sites">
          <li><a href="http://www.google.com/" rel="preview">Google</a></li>
          <li><a href="http://www.yahoo.com/" rel="preview">Yahoo</a></li>
        </ul>
      </div>
    </div>
  </body>
</html>
